<script lang="ts" setup>
import { onMounted } from 'vue'
const getWeather = () => {
  const s = document.createElement('script')
  s.type = 'text/javascript'
  s.src = 'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'
  document.body.appendChild(s)
  window.WIDGET = {
    CONFIG: {
      layout: '1',
      width: '450',
      height: '150',
      background: '1',
      dataColor: 'FFFFFF',
      key: 'df65434ef756438ba09813f9a63045f4',
      borderRadius: '5'
    }
  }
}
onMounted(() => {
  getWeather()
})
</script>

<template>
  <div>
    <div id="he-plugin-standard" />
  </div>
</template>

<style lang="scss" scoped>
:deep(div#he-plugin-standard) {
  width: 100% !important;
  height: calc(100% * 0.3) !important;
  padding: 27px 0px 18px 24px;
  box-sizing: border-box;
  min-height: 300px;
  .wv-v-h-location {
    padding: 0px !important;
    .wv-lt-location {
      span,
      a {
        font-size: 14px;
      }
    }
  }
  .wv-v-h-col-left {
    height: 80% !important;
    .wv-v-h-now {
      height: 100% !important;
      div.wv-n-h-now-img {
        > img {
          width: 9em !important;
        }
      }

      .wv-n-h-now-tmp {
        font-size: 5.7em;
      }
      .wv-n-h-now-txt {
        font-size: 1em;
        span {
          font-size: 1.3em;
        }
      }
      .wv-n-h-now-rain {
        float: none !important;
        position: relative !important;
        a {
          img {
            width: 1.4em;
          }
        }
        span {
          font-size: 1em;
        }
      }
      .wv-n-h-now-content {
        width: 70% !important;
      }
    }
  }
  .wv-v-h-col-right {
    height: 80% !important;
    .wv-v-h-forecast {
      height: 100% !important;
      .wv-f-forecast {
        .wv-f-row {
          height: 100%;
          display: flex;
          align-items: center;
          ul {
            height: 50%;
            .wv-f-forecast-date {
              > a {
                font-size: 1.2em;
              }
            }
            .wv-f-forecast-img {
              > a {
                > img {
                  margin: 0.5em auto;
                  width: 2.8em;
                }
              }
            }
            .wv-f-forecast-tmp {
              > a {
                font-size: 1.2em;
                margin: 0.5em auto;
              }
              > span {
                font-size: 1.2em;
              }
            }
          }
        }
      }
    }
  }
}
</style>
